
document.querySelector('.sss').addEventListener('click', function () {
    document.querySelector('.active') ? document.querySelector('.active').classList.remove('active') : ''
    document.querySelector('.sss').classList.add('active')
    document.querySelector('.sss').innerHTML = '沈琼昊'
})

document.querySelector('.wangbtn').addEventListener('click', function () {
    alert('我是熊大（王洁）');
})
const yyy = document.querySelector('.yyy')

yyy.addEventListener('mousemove', mouseMove)

function mouseMove() {
    yyy.innerHTML++
    console.log(yyy.innerText)
    if (+yyy.innerText > 200) {
        alert('歪歪')
        yyy.removeEventListener('mousemove', mouseMove)
    }
}

const zjr = document.querySelector('.zjr');
zjr.addEventListener('click', function () {
    alert('This is my zjr')
})




//1.写一个 生成模态框的 构造函数
function Modal(title, message) {
    this.title = title;
    this.message = message;
    this.modalBox = `<div class="modal">
                    <div class="header">${this.title}<i>x</i></div>
                    <div class="body">${this.message}</div>
                   </div>`;
}
//2.每一个模态框都要显示在网页页面上,所以代码封装成一个函数写在原型中
Modal.prototype.render = function () {
    //a.创建一个div
    let divNew = document.createElement('div');
    //b.设置这个div的内容为 this.modalBox
    divNew.innerHTML = this.modalBox;
    //c.把这个新建的div追加到页面上去. 
    document.body.appendChild(divNew);
    //d.给这个模态框的删除按钮设置点击事件,移除这个模态框(就是这个生成的div)
    divNew.querySelector('.header>i').onclick = function () {
        divNew.parentNode.removeChild(divNew);
    }
}

//点击按钮1创建模态框1
document.querySelector('.btn1').onclick = function () {
    let m1 = new Modal('你好', '邹攀峰');

    //渲染到页面
    m1.render();

}
